<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import * as echarts from 'echarts';

  const props = defineProps({
    option: {
      required: true,
    },
  });
  const chart = ref(null);
  const myecharts = ref();

  const reloadChart = () => {
    myecharts.value.setOption(props.option as any);
  };
  onMounted(() => {
    // let option = ;
    myecharts.value = echarts.init(chart.value as any);
    myecharts.value.setOption(props.option as any);
    window.onresize = function () {
      // echarts适配
      myecharts.value.resize();
    };

    watch(
      () => props.option,
      () => {
        console.log('执行这里');
        myecharts.value.setOption(props.option as any);
      },
    );
  });

  defineExpose({ reloadChart });
</script>

<template>
  <div id="box" ref="chart"> </div>
</template>

<style scoped lang="scss">
  #box {
    width: 100%;
    height: 480px;
  }
</style>
